import { Text, StyleSheet, View, Image, TouchableOpacity } from "react-native";
import React, { useState } from "react";
import PageContainer from "@/components/PageContainer";
import { useRouter } from "expo-router";
import useUser from "@/hooks/useUser";
import { Icon } from "@ant-design/react-native";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store";
import { setLanguage } from "@/store/language/actions";

export default function Invite() {
  const router = useRouter();
  const { t } = useTranslation();
  const dispatch = useDispatch();

  const { user } = useUser();
  const listData = [
    {
      id: "zh",
      name: t("header.languageSelector.chinese"),
    },
    {
      id: "zh-TW",
      name: t("header.languageSelector.traditional"),
    },
    {
      id: "en",
      name: t("header.languageSelector.english"),
    },
  ];
  const currentLanguage = useSelector(
    (state: RootState) => state.language.currentLanguage
  );
  const onSelect = (item: any) => {
    dispatch(setLanguage(item.id));
  };
  return (
    <PageContainer>
      <View className="bg-[#000] flex-1 p-[13px]">
        <View className="items-center flex-row h-[46px]">
          <TouchableOpacity onPress={() => router.back()}>
            <Image
              source={require("@/assets/images/return-left.png")}
              className="w-[18px] h-[18px]"
            />
          </TouchableOpacity>
          <View className="flex-1 flex-row justify-center">
            <Text className="text-[#fff] text-[18px]">
              {t("profile.language_switch")}
            </Text>
          </View>
          <View className="w-[18x] h-[18px]"></View>
        </View>
        <View>
          {listData.map((item, index, arr) => (
            <TouchableOpacity key={item.id} onPress={() => onSelect(item)}>
              <View
                style={{
                  borderBottomWidth: index === arr.length - 1 ? 0 : 1,
                  borderBottomColor: "#303030",
                }}
                className="py-[16px]"
              >
                <View className="flex-row justify-between gap-[10px] items-center">
                  <Text className="text-[#fff] text-[16px] flex-1">
                    {item.name}
                  </Text>
                  {currentLanguage === item.id && (
                    <Icon
                      name="check-circle"
                      style={{ fontSize: 20, color: "#478CFE" }}
                    />
                  )}
                </View>
              </View>
            </TouchableOpacity>
          ))}
        </View>
      </View>
    </PageContainer>
  );
}

const styles = StyleSheet.create({});
